<style>
    #topic-detail {
        padding: 20px 25px 25px 0;
    }

    .layui-form-label {
        width: 140px;
    }

    .layui-input-block {
        margin-left: 170px;
    }

    #topic-detail span {
        margin: 0 0 2px 3px !important;
    }

    .layui-layer-page .layui-layer-content {
        overflow: visible !important;
    }
</style>
<div class="layui-fluid" id="topic-detail">
    <form class="layui-form" lay-filter="topic-detail-form">
        <div class="layui-form-item">
            <div class="layui-col-md6">
                <label class="layui-form-label website-form-item-require">课题名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="title" data-th-value="${topic.topicName}" readonly class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-col-md6">
                <label class="layui-form-label">学科：</label>
                <div class="layui-input-block">
                    <input type="text" name="subjectTypeCode" readonly class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-col-md6">
                <label class="layui-form-label">课题类型：</label>
                <div class="layui-input-block">
                    <input type="text" name="topicClassify" readonly class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-col-md6">
                <label class="layui-form-label">课题分类：</label>
                <div class="layui-input-block">
                    <input type="text" name="topicLevelType" readonly class="layui-input">
                </div>
            </div>
        </div>

    </form>
</div>

<script data-th-inline="javascript">
    layui.use(['form', 'formSelects', 'dict'], function () {
        var $ = layui.$,
            formSelects = layui.formSelects,
            form = layui.form,
            dict = layui.dict,
            topic = [[${topic}]];
        form.render();
        initFormValue();
        formSelects.render();

        function initFormValue() {
            let topicClassify = dict.getByCode(topic.topicClassifyCode);
            let topicLevelType = dict.getByCode(topic.topicLevelType);
            let topicClassifyStr = topicClassify.name;
            let topicLevelTypeStr = topicLevelType.name;
            let typeName = "";
            let dictList = dict.getByCodes(topic.subjectTypeCodes);
            if (dictList) {
                for (var item of dictList) {
                    typeName += item.name + " ";
                }
            }
            form.val("topic-detail-form", {
                "topicName": topic.topicName,
                "subjectTypeCode": typeName,
                "topicClassify": topicClassifyStr,
                "topicLevelType": topicLevelTypeStr
            });
        }
    });
</script>